<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="攻略详情" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<view class="sub">
			<postUser :item="details" />
			<up-gap height="70rpx"></up-gap>
			<postIndex v-if="details" size="210rpx" right="30rpx" :item="details" @changeCollectStatus="getStrategy"
				@changeGoodStatus="getStrategy" />
		</view>
		<view class="review border-box">
			<view class="tabs flex align-item_center">
				<view v-for="(item,index) in reviewTabs" :key="index" :class="{title:index === reviewTabsCurrent}"
					@click="changeReviewTabsCurrent(index)">
					{{item.name}} <template v-if="item.count>0">（{{item.count}}）</template>
				</view>
			</view>
			<up-empty v-if="comment.list.length ===0 " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="item" v-for="item in comment.list" :key="item.id">
				<postUser :item="item" type="review" :operation="operationType" />
				<up-gap height="20rpx"></up-gap>
				<template v-if="reviewTabsCurrent === 0">
					<view class="content">
						{{item.content}}
					</view>
					<up-gap height="30rpx"></up-gap>
				</template>
			</view>
		</view>
		<view class="reviewInput flex align-item_center fixed border-box" v-if="reviewTabsCurrent === 0">
			<image class="block chat" src="https://ryyf.wangjintech.cn/static/image/review/0.png" />
			<up-input placeholder="请输入您要评论的内容" border="none" v-model="data.content"></up-input>
			<view class="button" @click="confirmReview">评论</view>
		</view>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="80"></up-back-top>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue"
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		msg
	} from "@/utils/tool.js"
	import postUser from "@/components/post/user.vue"
	import postIndex from "@/components/post/index.vue"
	import openApi from "@/api/biz/open.js"

	// 收藏
	function getUserCollectPage() {
		openApi.getUserCollectPage({
			...params,
			strategyId: id.value
		}).then(res => {
			if (res.code === 0) apiLogic(res)
		})
	}

	//点赞
	function getCommentRecordPage() {
		openApi.getCommentRecordPage({
			...params,
			strategyId: id.value
		}).then(res => {
			if (res.code === 0) apiLogic(res)
		})
	}

	// 转发
	function getShareRecordPage() {
		openApi.getShareRecordPage({
			...params,
			strategyId: id.value
		}).then(res => {
			if (res.code === 0) apiLogic(res)
		})
	}

	onReachBottom(() => {
		if (comment.list.length >= comment.total) return;
		params.pageNo++;
		getCommentPage()
	})

	const params = reactive({
		pageNo: 1,
		pageSize: 10
	})

	const comment = reactive({
		list: [],
		total: 0
	})

	function getCommentPage() {
		openApi.getCommentPage({
			...params,
			strategyId: id.value
		}).then(res => {
			if (res.code === 0) {
				reviewTabs[0].count = res.data.total
				apiLogic(res)
			}
		})
	}

	function apiLogic(res) {
		comment.total = res.data.total;
		if (params.pageNo === 1) comment.list = res.data.list;
		else comment.list = comment.list.concat(res.data.list)
	}

	function confirmReview() {
		if (!data.content.trim()) return msg("请输入评论内容")
		openApi.createComment({
			strategyId: id.value,
			toUserId: details.value.userId,
			content: data.content
		}).then(res => {
			if (res.code === 0) {
				msg("评论成功")
				data.content = ""
				getCommentPage()
				getStrategy()
			}
		})
	}

	const data = reactive({
		content: ""
	})

	const operationType = computed(() => {
		if (reviewTabsCurrent.value === 1) return "转发"
		else if (reviewTabsCurrent.value === 2) return "点赞"
		else if (reviewTabsCurrent.value === 3) return "收藏"
	})

	function changeReviewTabsCurrent(index) {
		reviewTabsCurrent.value = index;
		params.pageNo = 1;
		if (index === 0) getCommentPage()
		else if (index === 1) getShareRecordPage()
		else if (index === 2) getCommentRecordPage()
		else if (index === 3) getUserCollectPage()
	}
	const reviewTabsCurrent = ref(0)
	const reviewTabs = reactive([{
		name: "评论",
		count: 0
	}])
	const reviewTabsMore = [{
		name: "转发",
		count: 0
	}, {
		name: "点赞",
		count: 0
	}, {
		name: "收藏",
		count: 0
	}, ]

	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	const id = ref();
	const details = ref();

	function getStrategy() {
		openApi.getStrategy(id.value).then(res => {
			if (res.code === 0) {
				details.value = res.data
			}
		})
	}

	const self = ref(false);
	onLoad((option) => {
		id.value = option.id
		self.value = option.self === 'true' ? true : false
		if (self.value) {
			reviewTabsMore.forEach(item => reviewTabs.push(item))
		}
		getStrategy()
		getCommentPage()
	})
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.reviewInput {
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 100rpx;
		padding: 0 4rpx 0 30rpx;

		.button {
			width: 140rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #0D7BFA;
			border-radius: 100rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
		}

		.chat {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
		}
	}

	.review {
		width: 750rpx;
		min-height: 800rpx;
		padding: 60rpx 30rpx 260rpx;
		background: #25223B;
		border-radius: 40rpx 40rpx 0 0;


		.item {
			margin-top: 30rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, .1);

			.content {
				font-weight: 400;
				font-size: 28rpx;
				color: #EDFAFF;
				line-height: 52rpx;
			}
		}

		.tabs {
			height: 60rpx;
			line-height: 60rpx;

			view {
				height: 60rpx;
				line-height: 60rpx;
				margin-right: 42rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #EDFAFF;
				opacity: 0.6;
				transition: all .2s;
			}

			.title {
				font-weight: 600;
				font-size: 34rpx;
				color: #EDFAFF;
				opacity: 1;
			}
		}

	}

	.sub {
		padding: 40rpx 30rpx;
	}
</style>